<!-- 模版列表 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label mb10">主题列表</p>
    <dxtable
      :dataJson="dataJson"
      :portUrl="portUrl"
      :formJson="formJson"
      :qx="qx"
      ref="databale"
    ></dxtable>
  </div>
</template>
<script lang="ts" setup>
import dxtable from "../../components/util/dxtable.vue";
import sort from "../../components/util/sort.vue";
import { dxget, dxpost } from "../../util/index";
import { NButton, NImage, NTag, NSwitch } from "naive-ui";
import { h, ref, reactive } from "vue";
const databale = ref();
const mtlabelxl = ref([]);
const mtrmflvla = ref([]);
const portUrl = "riceRabbit/theme";
const initeer = () => {
  databale.value.initDataExpose();
};
let dataJson = [
  {
    title: "主题名称",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 24,
    key: "name",
    width: "",
    search: true,
    istable: true,
    required: false,
  },
  {
    title: "封面",
    type: "img",
    val: "",
    icon: "dx-img",
    span: 24,
    key: "cover",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "原价",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "originalCost",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "当前价格",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "currentPrice",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "标签",
    type: "select",
    icon: "dx-biaodanzujian-xialakuang",
    key: "classify",
    search: true,
    options: [],
    render: (row) => {
      try {
        if (!row.modellingList) {
          row.modellingList = [];
        }
      } catch (e) {}
      row.classify = row.classify.split(",");
      try {
        let kmxcdfd = [];

        row.classify.map((ara) => {
          kmxcdfd.push(mtlabelxl.value.filter((a) => a.value == ara)[0].label);
        });
        return kmxcdfd.join(",");
      } catch (e) {}
    },
  },
  {
    title: "风格",
    type: "select",
    icon: "dx-biaodanzujian-xialakuang",
    key: "style",
    options: [],
    search: true,
    render: (row) => {
      try {
        return mtrmflvla.value.filter((a) => a.value == row.style)[0].label;
      } catch (e) {
        return "-";
      }
    },
  },
  {
    title: "状态(上下架)",
    search: true,
    type: "select",
    options: [
      {
        label: "全部",
        value: "",
      },
      {
        label: "上架",
        value: "1",
      },
      {
        label: "下架",
        value: "2",
      },
    ],
    key: "Shelves",
    render: (row) => {
      return h(NSwitch, {
        defaultValue: row.Shelves == 1 ? true : false,
        onChange: async (data) => {
          await dxpost(
            portUrl,
            {
              id: row.id,
              Shelves: data ? "1" : "2",
            },
            "put"
          );
          window.$message.success("操作成功！");
        },
      });
    },
  },
  {
    title: "排序",
    width: 100,
    render: (row) => {
      row.sjk = "riceRabbit"; //数据库
      row.databaseName = "theme"; //表名
      return h(sort, {
        row,
        onCallBack: () => {
          initeer();
        },
      });
    },
  },
  {
    title: "添加时间",
    key: "addTime",
    width: 150,
  },
];

const qx = {
  DeletePermissionID: "riceRabbitthemedel", //删除
  EditPermissionIdentifier: "riceRabbitthemebj", // 编辑
  NewPermissionIdentifier: "riceRabbitthemexz", // 新建
  ViewPermissionID: "riceRabbitthemeck", // 查看
};

let formJson = reactive([
  {
    title: "主题名称",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 24,
    key: "name",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "封面",
    type: "img",
    val: "",
    icon: "dx-img",
    span: 24,
    key: "cover",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "造型",
    type: "imglist",
    val: [],
    icon: "dx-img",
    span: 24,
    key: "modellingList",
    width: "",
    search: false,
    istable: true,
    required: false,
  },

  {
    title: "原价",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "originalCost",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "当前价格",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "currentPrice",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "分类",
    type: "select",
    icon: "dx-biaodanzujian-xialakuang",
    options: [],
    val: "1",
    span: 24,
    key: "classify",
    width: "",
    search: false,
    multiple: true,
    istable: true,
    required: false,
  },
  {
    title: "风格",
    type: "select",
    icon: "dx-biaodanzujian-xialakuang",
    options: [],
    val: "1",
    span: 12,
    key: "style",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
]);
const czFun = {
  fun: (row) => {
    return [
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {},
        },
        "复制代码"
      ),
    ];
  },
};

// 获取字典内容
const xtgxxmfl = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd", { name: "mtlabel" });
  dataJson[4].options = [
    {
      label: "全部",
      value: "",
    },
    ...data,
  ];
  formJson[4].options = data;
  mtlabelxl.value = data;
};
xtgxxmfl();

// 获取字典内容
const mtrmflfun = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd", { name: "mtrmfl" });
  dataJson[5].options = [
    {
      label: "全部",
      value: "",
    },
    ...data,
  ];
  formJson[5].options = data;
  mtrmflvla.value = data;
};
mtrmflfun();
</script>
<style scoped></style>
